<template>
	<view class="bg-gray" style="min-height: 100vh;">
		<u-navbar title="提现"></u-navbar>
		<view class="u-p-x-30 u-p-y-40" style="background-color: #ffffff;">
			<view class="cash-way" @tap="chooseMay">
				<view class="label text-blue">选择收款方式：</view>
				<view class="info">
					<view v-if="curWay">
						<view class="u-font-32">{{curWay.wayName}}</view>
						<view class="u-font-26 text-grey">{{curWay.label}}</view>
					</view>
				</view>
				<view class="arrow">
					<text class="u-m-r-20 text-gray" v-if="!curWay">请选择收款方式</text>
					<text class="text-gray u-font-32 iconfont icon-arrow-right"></text>
				</view>
			</view>
		</view>
		<view class="text-center padding-top-xl">
			<text>余额:</text>
			<text class="text-price margin-left"></text>
			<text class="text-xxl">{{assets.catMoney}}</text>
		</view>
		<view class="bg-white padding margin radius shadow">
			<view class="text-xxl">
				提现金额
			</view>
			<view class="padding-top-sm padding-bottom-sm solid-bottom flex align-center">
				<view class="text-price text-xxl"></view>
				<input type="number" v-model="money" :placeholder="`最低${cashMin}元起提`" class="response flex-sub  margin-lr" />
				<!-- <button class="cu-btn line-orange shadow sm" @tap="all">全部</button> -->
			</view>
		</view>
		<!-- <view class="padding-lr text-sm">
			手续费：¥1.00,预计一个工作日到账
		</view> -->
		<view class="padding-top-xl padding-lr-xl">
			<view class="padding-lr-xl">
				<button class="cu-btn bg-orange shadow round lg block " @tap="confirm()">确定提现</button>
			</view>
		</view>
		<view class="footnav text-center text-grey">
			<view  @tap="service" class="padding-lr-sm">
				<view class="text-sm margin-top-xs">联系客服</view>
			</view>
			<navigator hover-class="none" url="/pages/wallet/detail?type=1" class="padding-lr-sm solid-left">
				<view class="text-sm margin-top-xs">提现记录</view>
			</navigator>
		</view>
		<view class="cu-modal" :class="{show:askModel}">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提现确认</view>
					<view class="action">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl flex flex-direction hint" v-if="curWay">
					<view class="flex margin-bottom-sm">
						<text class="title">平台：</text>
						<text>{{curWay.wayName}}</text>
					</view>
					<view class="flex margin-bottom-sm">
						<text class="title" v-if="curWay.extractForm==1">支付宝账号：</text>
						<text class="title" v-else-if="curWay.extractForm==2">微信号：</text>
						<text class="title" v-else-if="curWay.extractForm==3">银行卡号：</text>
						<text class="title" v-else-if="curWay.extractForm==4">地址：</text>
						<text class="title" v-else>账号：</text>
						<text>{{curWay.cardNum}}</text>
					</view>
					<view class="flex margin-bottom-sm">
						<text class="title" v-if="curWay.extractForm==1">支付宝名称：</text>
						<text class="title" v-else-if="curWay.extractForm==2">微信名称：</text>
						<text class="title" v-else-if="curWay.extractForm==3">持卡人姓名：</text>
						<text class="title" v-else-if="curWay.extractForm==4">网络：</text>
						<text class="title" v-else>姓名：</text>
						<text>{{curWay.cardUserName}}</text>
					</view>
					<view v-if="curWay.cardName" class="flex margin-bottom-sm">
						<text class="title">开户银行：</text>
						<text>{{curWay.cardName}}</text>
					</view>
					<view class="flex">
						<text class="title">提现金额：</text>
						<text class="text-lg text-orange text-price" >{{money}}</text>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="askModel=!askModel">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="cashOut">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {toast,delay,goback,jumpTo} from "@/utils/util.js"
	import {STAFF} from "@/utils/constant.js"
	import walletAPI from "@/api/wallet.js"
	import {mapGetters,mapMutations,mapActions} from 'vuex'
	import { ConversationType } from "@/entity/ConversationType"
	export default {
		data() {
			return {
				money:'',
				askModel:false,
				curWay:null
			}
		},
		computed:{
			...mapGetters('wallet',['assets']),
			...mapGetters('system',['cashMin'])
		},
		methods: {
			...mapMutations('wallet',['setCatMoney']),
			...mapActions('chat', ['setConversation']),
			chooseMay(){
				uni.navigateTo({
					url:'/pages/wallet/cashWays',
					events:{
						picked:(may)=>{
							this.curWay = may
						}
					}
				})
			},
			all(){
				this.money = this.assets.catMoney
			},
			check(){
				if(isNaN(this.money)){
					throw new Error('金额错误')
				}
				const money = Number(this.money)
				if(money<=0){
					throw new Error('金额错误')
				}
				if(money<this.cashMin){
					throw new Error(`最低提现金额${this.cashMin}元`)
				}
				if(!this.curWay){
					throw new Error('请选择收款方式')
				}
			},
			async confirm(){
				try{
					await this.check()
					this.askModel = true
				}catch(e){
					toast(e.message)
				}
			},
			async cashOut(){
				try{
					await this.check()
					this.askModel = false;
				}catch(e){
					return toast(e.message)
				}
				if(this.cashOut.lock){
					return
				}
				try{
					this.cashOut.lock = true
					await walletAPI.cashOut({
						money:Number(this.money),
						...this.curWay
					})
					this.setCatMoney((this.assets.catMoney*100-this.money*100)/100)
					uni.showToast({
						title:'操作成功',
						duration:1000
					})
					uni.$emit('wallet_reset_incomes')
					await delay(1000)
					goback()
				}finally{
					this.cashOut.lock = false
				}
				
			},
			service(){
				this.setConversation({
					id: '000000000',
					type: ConversationType.Single,
					avatar: '/static/logo.png',
					name: '快聊客服'
				})
				jumpTo(`/pages/room/single?id=000000000`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footnav{
		position:fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.hint .title{
		width: 30%;
		text-align: end;
		margin-right: 30rpx;
	}
	.cash-way{
		display: flex;
		align-items: center;
		.label{
			flex-shrink: 0;
			margin-right: 30rpx;
		}
		.info{
			flex: 1;
			width: 100rpx;
		}
		.arrow{
			flex-shrink: 0;
			margin-left: 30rpx;
		}
	}
</style>
